<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="../css/bootstrap.css"
type="text/css"
rel="stylesheet"
/>
<script 
src="../js/vue.js"
type="text/javascript"></script>
<script 
src="../js/axios.min.js"
type="text/javascript"></script>
</head>
<body>
<div class="container" id="app">
   <div class="row">
      <div class="col-xs-12">
      <img class="img-responsive"
   src="/images/mobileImage/banner.png">
      </div>
   
   </div>
   <div class="row">
      <div class="col-xs-12 col-sm-6"
      v-for="item in items"
      >
      <a  v-bind:href="item.detailUrl">
      <!-- v-bind:src属性交给vue处理 -->
      <img v-bind:src="item.image">
      <br/>
      <span>{{item.title}}</span>
      <span>{{item.price}}</span>
      </a>
      </div>
   </div>
</div>
</body>
<script type="text/javascript">
var options={
		el:"#app",
		data:{
			items:[]
		},
		mounted:function(){
			var url="/api/getIndexItem.html";
			axios.get(url)
			.then(function (response){
				//response有6个属性 config,header,data,status,statusText
				//取controller返回的数据
				//serverData有三个key,分别是status,msg,data
				var serverData=response.data;
				var items=serverData.data;
				//4个商品，每个商品 是item 有title,image,price
				//给item加detailUrl属性，值是"detail.html?itemId="
				for (var i=0;i<items.length;i++)
					{
					var item=items[i];
					//给对象动态添加属性和函数
					//item.id中的id是服务器返回的商品有个属性是id
					//?itemId可随便写,在detail.html中通过itemId来接收数据
					item.detailUrl="detail.html?itemId="+item.id;
					}
						//options{data:{items:[]}}
				
				this.vue.items=items;
			})
			.catch();
		}
}

var vue=new Vue(options);
</script>
</html>



